{% extends 'web/layout/manage.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'web/css/wiki.css' %}">
    <link rel="stylesheet" href="{% static 'web/plugin/editor.md-master/css/editormd.min.css' %}">
    <style>
        .editormd-fullscreen{
            z-index: 1007;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid project">
        <div class="panel panel-default">
              <div class="panel-heading">
                  <div>
                    <i class="fa fa-book" aria-hidden="true"></i> wiki文档
                  </div>
                  <div class="function" >
                           <a type="button" class="btn btn-success btn-xs" href="{% url 'wiki_add' project_id=request.tracer.project.id %}">
                                <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建
                           </a>
                  </div>
              </div>
              <div class="panel-body">
                  <div class="col-sm-3 title-list">
                     <ul id="catalog">

                     </ul>

                  </div>
                  <div class="col-sm-9 content" style="text-align:left">

                      <form method="post" novalidate>
                          {% csrf_token %}
                          {% for field in form %}
                              {% if field.name == 'content' %}
                                  <div class="form-group" >
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    <div id="editor">
                                        {{ field }}
                                    </div>
                                    <span class="error-msg">{{ field.errors.0 }}</span>
                                  </div>
                              {% else %}
                                  <div class="form-group" >
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                        {{ field }}
                                    <span class="error-msg">{{ field.errors.0 }}</span>
                                  </div>
                              {% endif %}
                          {% endfor %}
                          <button type="submit" class="btn btn-primary">提 交</button>
                        </form>
                  </div>
              </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script src="{% static 'web/plugin/cos-js-sdk-v5.min.js' %}"></script>
    <script>
        var cos;
        $(function (){
            initCos();
            initCos_linshi();
            bindChangeFileInput();
        });
    /*直接通过密钥上传时，cos的初始化*/
        function initCos(){
            cos = new COS({
                SecretId:'',
                SecretKey:'',
            })
        }
    /* 通过临时凭证上传时的，cos初始化 */
        function initCos_linshi(){
            cos = new COS({
                getAuthorization:function (options,callback){
                    //向django后台发送请求，获取临时凭证
                    $.get('/cos/credential/',{},function (data){
                        var credentials = data && data.credentials;
                        if(!data || !credentials) return console.error('credentials invalid')
                        callback({
                            TmpSecretId:credentials.tmpSecretId,
                            TmpSecretKey:credentials.tmpSecretKey,
                            XCosSecurityToken:credentials.sessionToken,
                            StartTime:data.startTime,
                            ExpiredTime:data.expiredTime,
                        });
                    });
                }
            });
        }

        function bindChangeFileInput(){
           $("#uploadFile").change(function (){
               //获取要上传的所有文件对象列表
               var files = $(this)[0].files;
               $.each(files,function (index,fileObject){
                   //获取文件的名字
                   var fileName = fileObject.name;
                   //上传文件到COS桶，使用上面初始化COS的对象cos
                   cos.putObject({
                       Bucket:'',
                       Region:'',
                       key:'',
                       storageClass:'STANDARD',
                       Body:fileObject,
                       //回调函数onProgress，再上传时会自动执行
                       onProgress:function (progressData){
                            console.log("文件上传进度----->",fileName,JSON.stringify(progressData));
                       }
                   },function(err,data){
                            //上传cos成功显示data，上传失败显示err
                           console.log(err || data);
                           // 把上传成功的文件信息提交给django，并让django再写入数据库
                   })

               })
           })
        }
    </script>
{% endblock %}












